<template>
  <div class="content">
    <div class="tabel-title">
      <span>{{ $t("page.ODvalue") }}：</span>
    </div>
    <!-- 大表格 -->
    <div
      v-for="(listItem, listIndex) in ItemData.originalData"
      :key="listIndex"
    >
      <div class="overflow">
        <table id="table">
          <tr v-for="(table, key, index) in listItem" :key="index">
            <td class="color-000">
              {{ key !== "time" ? key : $t("page.hole") }}
            </td>
            <td>
              <span v-if="key !== 'time'">
                {{ getConcentration(key) }}
              </span>
              <span class="color-000" v-else>{{ $t("page.label") }} </span>
            </td>
            <td v-for="(iTable, index) in table" :key="index">
              <span v-if="key !== 'time'">{{ iTable }}</span>
              <span class="color-000 timer" v-else>{{ iTable + "s" }}</span>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!-- 曲线-echarts -->
    <div class="d-flex" style="margin:20px 20px 20px 100px;">
      <el-checkbox-group
        v-model="checkList"
        style="margin-left:20px;"
        @change="setValue"
      >
        <el-checkbox
          :disabled="checkList.length === 1 && checkList.indexOf('曲线') > -1"
          :label="$t('page.curve')"
        />
        <el-checkbox
          :disabled="checkList.length === 1 && checkList.indexOf('拟合') > -1"
          :label="$t('page.fitting')"
        />
      </el-checkbox-group>
    </div>
    <linePointDiagram
      :value="resultFormatValue"
      :markLine="ItemData.dissociation"
      @generateImg="shotImg(0, $event)"
    ></linePointDiagram>

    <!-- 柱状图 -->
    <!-- <HistogramVue
      v-if="isSteadyType && ItemData.histogramList"
      :id="`his${uuidC}`"
      :data="ItemData.histogramList || []"
      @shotImg="shotImg(0, $event)"
    ></HistogramVue> -->

    <!-- OD 值 -->
    <img
      v-show="isSteadyType"
      :src="ItemData.imgUrl"
      alt="图片"
      style="width: 600px;height: 400px;"
    />

    <!-- 分子量 -->
    <div class="title-space">
      <span>{{ $t("page.molecular") }}（Da）：</span>
      {{ ItemData.mole }}
    </div>
    <!-- 结果表格 -->
    <ParamTable :paramResult="ItemData.paramResult || {}"></ParamTable>

    <!-- 下载结果表 -->
    <div class="title-space">
      <span>{{ $t("page.calResultes") }}：</span>
      <el-button type="text" @click="downloadExl()" size="mini">{{
        $t("page.export")
      }}</el-button>
    </div>
  </div>
</template>
<script>
import ParamTable from "@/components/ParamTable";
// import HistogramVue from "./histogram.vue";
import { getStore } from "@/utils/common";
import { fetchUploadExl } from "@/api/table";
import linePointDiagram from '@/commonPage/linePointDiagram'
import { formatData } from '@/commonPage/linePointDiagram/formatData'

export default {
  props: {
    ItemData: {
      type: Object,
      default: () => {},
    },
    uuidC: {
      type: String,
      required: true
    },
    isDetailPage: {
      type: Boolean,
      default: false
    },
    isSteadyType: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      lang: getStore("spr-lang") || "zh", // 语言类型,
      imgList: [],
      checkList: ["曲线", "拟合"],
      keyList: [],
      lineValues: [],
      xAxisTimes: [],
      myChart: null,

      resultFormatValue: {},
    };
  },
  watch: {
    ItemData: {
      handler() {
        this.setValue();
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    // 表格浓度数据
    getConcentration(key) {
      const i = this.ItemData.hole.findIndex((item) => item === key);
      return this.ItemData.concentration && this.ItemData.concentration[i] + '' || "";
    },

    setValue() {
      if(this.checkList.length >= 2) {
        this.resultFormatValue = {
          ...formatData(this.ItemData.fittingData, '拟合'),
          ...formatData(this.ItemData.lineData),
        }
      } else if(this.checkList.includes('曲线')) {
        this.resultFormatValue = {
          ...formatData(this.ItemData.lineData),
        }
      } else {
        this.resultFormatValue = {
          ...formatData(this.ItemData.fittingData, '拟合')
        }
      }
    },

    // 点击下载excel
    downloadExl() {
      let lang = this.lang === "zh" ? "CN" : "ENG";
      const href = `${
        process.env.BASE_URL
      }receive/download/excel/1/${lang}/${this.ItemData.uuid}`;
      window.open(href, "_blank");
    },

    // 储存图形图片
    shotImg(i, data) {
      if(this.isDetailPage) return
      this.imgList[i] = data;
      this.imgUpLoad();
    },

    // 生成excel
    async imgUpLoad() {
      try {
        await fetchUploadExl({
          uuid: this.ItemData.uuid,
          imgBase64: this.imgList,
        });
      } catch (err) {
        return err;
      }
    },
  },
  components: {
    ParamTable,
    linePointDiagram,
    // HistogramVue,
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 20px;
  height: 100%;
}
.tabel-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
#table {
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  td {
    padding: 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #d3d8e3;
    font-size: 14px;
    min-width: 60px;
  }
  tr:first-child {
    background-color: #e5e8ed;
    font-weight: 700;
  }
}
</style>
